<template>
	<view class="container">
		<view class="info main">
			<image src="/static/loading.png" mode="widthFix"></image>
			<text>{{info.title}}</text>
		</view>
		<view class="answer main">
			<textarea v-model="form.result" placeholder="上课感受怎样，请输入您的问题或答案" auto-height />
			<!-- <uni-file-picker limit="9"></uni-file-picker> -->
		</view>
		<view class="anonymous">
				<checkbox-group @change="handleSafeChange">
				<label>
					<checkbox 
							value="cb"
					        :checked="isSafe" 
					        class="checkbox"
					      />匿名评价
				</label>
				</checkbox-group>
	
		</view>
		<view class="submit" @click="submit">
			确认发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questions_id:'',
				info:{},
				isSafe:false,
				form:{},
			}
		},
		onLoad(option) {
			this.questions_id = option.questions_id
			this.getDetail(this.questions_id)
		},
		methods: {
			handleSafeChange(e) {
				if(e.detail.value.length == 0)
				{
					this.isSafe = false
				}else{
					this.isSafe = true
				}
			  // console.log('是否匿名:', this.isSafe);
			},
			getDetail(questions_id) {
				this.$post("/course/questions_detail", {
					questions_id
				}).then(res => {
					this.info = res.data
				})
			},
			submit()
			{
				if(!this.form.result || this.form.result.length < 2)
				{
					this.$toast("请输入您的问题或答案，至少2个字符")
					return
				}
				this.form.questions_id = this.questions_id
				this.form.isSafe = this.isSafe ? 1 : 0;
				this.$loading("正在提交")
				this.$post("/course/answer_submit", this.form).then(res => {
				
					 console.log(res)
					 if(res.data)
					 {
						 this.$toast("提交成功")
						 setTimeout(()=>{
							 uni.navigateBack()
						 },1500)
					 }
				})
					
			}
		}
	}
</script>

<style lang="scss">
	.main {
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.04);
		border-radius: 4px;
	}

	.submit {
		background: linear-gradient(180deg, rgba(155, 227, 224, 1) 0%, rgba(81, 199, 108, 1) 100%);
		color: #fff;
		width: 400rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 40rpx;
		box-shadow: 0px 3px 6px 0px rgba(81, 199, 108, 0.4);
		border: 1px solid rgba(81, 199, 108, 1);
		border-radius: 100px;
		margin: 50rpx auto;
	}

	.info {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 140rpx;
		}

		text {
			display: block;
			width: calc(100% - 140rpx);
			padding-left: 30rpx;
			font-weight: bold;
		}
	}

	.answer {
		margin: 40rpx 0;

		uni-textarea {
			padding: 30rpx;
			min-height: 300rpx;
			width: 100%;
			font-size: 28rpx;
		}
	}

	.anonymous {
		font-size: 28rpx;
		color: #999;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		color: #fff;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #51C76C;
		border-color: #51C76C;
	}
</style>